import React, { useState } from 'react';
import {
  Box,
  Tabs,
  Tab,
  Grid,
  Paper,
  Typography,
  Chip,
  Stack,
} from '@mui/material';
import ImageIcon from '@mui/icons-material/Image';
import BorderAllIcon from '@mui/icons-material/BorderAll';
import ShapeLineIcon from '@mui/icons-material/Timeline';
import { useDrag } from 'react-dnd';
import { getDecorationItems, getCategories } from '../../data/decorations';

// 可拖拽的装饰元素组件
const DraggableItem = ({ item }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'decoration',
    item: { ...item },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <Paper
      ref={drag}
      elevation={isDragging ? 3 : 1}
      sx={{
        p: 1,
        cursor: 'move',
        opacity: isDragging ? 0.5 : 1,
        '&:hover': { backgroundColor: 'action.hover' },
      }}
    >
      <Box
        sx={{
          width: '100%',
          paddingTop: '100%',
          position: 'relative',
          backgroundColor: 'grey.100',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography
          variant="h4"
          sx={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
          }}
        >
          {item.emoji}
        </Typography>
      </Box>
      <Typography variant="caption" align="center" display="block">
        {item.name}
      </Typography>
    </Paper>
  );
};

function DecorationPanel({ onAddDecoration }) {
  const [currentTab, setCurrentTab] = useState(0);
  const [currentCategory, setCurrentCategory] = useState(null);

  const handleTabChange = (event, newValue) => {
    setCurrentTab(newValue);
    setCurrentCategory(null);
  };

  const getTabType = () => {
    const types = ['stickers', 'frames', 'shapes'];
    return types[currentTab];
  };

  const renderCategories = () => {
    const type = getTabType();
    const categories = getCategories(type);

    return (
      <Stack
        direction="row"
        spacing={1}
        sx={{ p: 1, overflowX: 'auto' }}
      >
        <Chip
          label="全部"
          onClick={() => setCurrentCategory(null)}
          variant={currentCategory === null ? 'filled' : 'outlined'}
          size="small"
        />
        {Object.values(categories).map((cat) => (
          <Chip
            key={cat.id}
            label={cat.name}
            icon={<span>{cat.icon}</span>}
            onClick={() => setCurrentCategory(cat.id)}
            variant={currentCategory === cat.id ? 'filled' : 'outlined'}
            size="small"
          />
        ))}
      </Stack>
    );
  };

  const renderItems = () => {
    const type = getTabType();
    const items = getDecorationItems(type, currentCategory);

    return (
      <Grid container spacing={1} sx={{ p: 1 }}>
        {items.map((item) => (
          <Grid item xs={4} key={item.id}>
            <DraggableItem item={item} />
          </Grid>
        ))}
      </Grid>
    );
  };

  return (
    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <Tabs
        value={currentTab}
        onChange={handleTabChange}
        variant="fullWidth"
        sx={{ borderBottom: 1, borderColor: 'divider' }}
      >
        <Tab icon={<ImageIcon />} label="贴纸" />
        <Tab icon={<BorderAllIcon />} label="边框" />
        <Tab icon={<ShapeLineIcon />} label="形状" />
      </Tabs>
      {renderCategories()}
      <Box sx={{ flexGrow: 1, overflow: 'auto' }}>
        {renderItems()}
      </Box>
    </Box>
  );
}

export default DecorationPanel;
